<!--
* description: cc工单
* author: hzm
* createdDate: 2021-2-25
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="dynamicApiConfigs"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :dynamic-is-fix-choose="false"
      :dynamic-is-fix-index="false"
      :dynamic-api-style="'restful'"
    >
      <template slot="controlBtn" slot-scope="scope">
        <el-link
          v-show="scope.row.orderStatus === '1'||scope.row.orderStatus === '3' ||
            scope.row.orderStatus === '4'||scope.row.orderStatus === '8' ||
            scope.row.orderStatus === '9' || scope.row.orderStatus === '10'"
          type="primary"
          :underline="false"
          title="回复"
          style="font-size:12px;"
          @click="replay(scope.row)"
        >回复</el-link>
        <el-link
          v-show="scope.row.orderStatus === '1'||scope.row.orderStatus === '2' ||
            scope.row.orderStatus === '6'|| scope.row.orderStatus === '8'||
            scope.row.orderStatus === '9'|| scope.row.orderStatus === '10'"
          type="primary"
          :underline="false"
          title="受理"
          style="font-size:12px;"
          @click="accept(scope.row)"
        >受理</el-link>
        <el-link
          v-show="scope.row.orderType === '4' && scope.row.orderStatus === '5'"
          type="primary"
          :underline="false"
          title="审核"
          style="font-size:12px;"
          @click="audit(scope.row)"
        >审核</el-link>
        <el-link
          type="primary"
          :underline="false"
          title="详情"
          style="font-size:12px;"
          @click="detail(scope.row)"
        >详情</el-link>
      </template>
    </one-table-template>
    <detail
      :key="detailPopupsKey"
      :dynamic-edit-row-data="detailRowData"
      :popups-visible.sync="detailPopupsVisible"
      :popups-state="editPopupsState"
      @close="close"
    />
    <replay
      :key="replayPopupsKey"
      :dynamic-edit-row-data="replayRowData"
      :popups-visible.sync="replayPopupsVisible"
      :popups-state="editPopupsState"
    />
    <audit
      :key="auditPopupsKey"
      :dynamic-edit-row-data="auditRowData"
      :popups-visible.sync="auditPopupsVisible"
      :popups-state="editPopupsState"
    />
  </div>
</template>

<script>
// import { formMixins } from "@/components/mixins/formMixins";
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/caseManagementQuery'

export default {
  name: 'CustomCcgd',
  components: {
    OneTableTemplate,
    Detail: () => import('./detail'),
    audit: () => import('./audit'),
    replay: () => import('./replay')
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    return {
      detailPopupsKey: '1',
      detailRowData: {},
      detailPopupsVisible: false,

      auditPopupsKey: '11',
      auditRowData: {},
      auditPopupsVisible: false,

      replayPopupsKey: '111',
      replayRowData: {},
      replayPopupsVisible: false,
      dynamicApiConfigs: orgApis.queryData,
      // 动态生成网格列
      tableCols: [
        {
          prop: 'controlBtn',
          label: '操作', // 操作
          codeField: 'controlBtn',
          width: 140,
          align: 'center',
          isSlot: true
          // isComponent: true,
          // comps: [
          //   {
          //     compKey: 'propKey1',
          //     labelName: '受理',
          //     align: 'center',
          //     compareField: 'editControlBtn',
          //     rowFileds: 'show:orderStatus--3|4|5|6|7',
          //     component: () => import('@/components/org/linkButton'),
          //     clickEvent: (index) => this.accept(index)
          //   },
          //   {
          //     compKey: 'propKey2',
          //     labelName: '回复',
          //     align: 'center',
          //     codeField: 'editControlBtn',
          //     rowFileds: 'show:orderStatus--2|5|7',
          //     clickEvent: (index) => this.replay(index),
          //     component: () => import('@/components/org/linkButton')
          //   },
          //   {
          //     compKey: 'propKey13',
          //     labelName: '审核',
          //     align: 'center',
          //     codeField: 'editControlBtn',
          //     // rowFileds: 'show:orderStatus-6 && orderType-4',
          //     clickEvent: (index) => this.audit(index),
          //     component: () => import('@/components/org/linkButton')
          //   },
          //   {
          //     compKey: 'propKey4',
          //     labelName: '详情',
          //     align: 'center',
          //     clickEvent: (index) => this.detail(index),
          //     component: () => import('@/components/org/linkButton')
          //   }
          // ]
        },
        {
          prop: 'orderCode',
          label: 'cc工单号',
          align: 'center'
        },
        {
          prop: 'orderTypeName',
          label: '工单类型',
          align: 'center'
        },
        {
          prop: 'orderStatusName',
          label: '工单状态',
          align: 'center'
        },
        {
          prop: 'dlrCode',
          label: '门店编码',
          align: 'center'
        },
        {
          prop: 'dlrName',
          label: '门店名称',
          align: 'center'
        },
        {
          prop: 'vin',
          label: 'VIN码',
          align: 'center'
        },
        {
          prop: 'carNumber',
          label: '车牌号',
          align: 'center'
        },
        {
          prop: 'custName',
          label: '客户名称',
          align: 'center'
        },
        {
          prop: 'orderSendDate',
          label: '派单时间',
          align: 'center'
        },
        {
          prop: 'dlrRespondDate',
          label: '受理时间',
          align: 'center'
        },
        {
          prop: 'replyCloseDate',
          label: '结案时间',
          align: 'center'
        }
      ],
      tableComponents: [
        // 库存状态
        {
          compKey: 'compKey1',
          labelName: 'CC工单号：',
          codeField: 'orderCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 6
        },
        // 车辆状态
        {
          compKey: 'compKey2',
          labelName: 'VIN码：',
          codeField: 'vin',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 6
        },
        {
          compKey: 'compKey5',
          labelName: '状态：',
          codeField: 'orderStatus',
          customObj: {
            api: orgApis.workStatus
          },
          component: () => import('@/components/org/commonSelect'),
          isMust: true,
          span: 6
        },
        // 入库仓库
        {
          compKey: 'compKey3',
          labelName: '客户名称：',
          codeField: 'custName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 6
        },

        // 审核状态
        {
          compKey: 'compKey4',
          labelName: '派单日期：',
          codeField: 'startDate,endDate',
          component: () => import('@/components/org/datePicker/andtDatePicker'),
          type: 'YYYY-MM-DD',
          format: 'yyyy-MM-dd',
          isMust: false,
          span: 6
        },

        //    {
        //   compKey: "compKey4",
        //   labelName: "受理时间：",
        //   codeField: "startDate,endDate",
        //   component: () => import("@/components/org/datePicker/andtDatePicker"),
        //   type: "YYYY-MM-DD",
        //   format: "yyyy-MM-dd",
        //   isMust: false,
        //   span: 6
        // },

        // VIN码
        {
          compKey: 'compKey6',
          labelName: '门店编码：',
          codeField: 'dlrCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false,
          span: 6
        },
        // 质量状态
        {
          compKey: 'compKey7',
          labelName: '门店名称：',
          codeField: 'dlrName',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',
          isMust: false,
          span: 6
        },
        {
          compKey: 'compKey8',
          labelName: '工单类型：',
          codeField: 'orderType',
          customObj: {
            api: orgApis.workType
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: false,
          span: 6
        }
      ],
      tableButtons: [
        {
          conmpKey: 'btenKey2',
          type: 'primary',
          size: 'small',
          text: '查询',
          name: 'search',
          clickEvent: () => this.queryTable(),
          position: 'right'
        },
        {
          conmpKey: 'btenKey3',
          size: 'small',
          text: '重置',
          name: 'reset',
          clickEvent: () => this.reset(),
          position: 'right'
        }
      ],
      formField: this.$utils.getFormField(this, {
        orderCode: '',
        vin: '',
        orderStatus: '',
        custName: '',
        startDate: '',
        endDate: '',
        dlrCode: '',
        dlrName: '',
        orderType: ''
      })
    }
  },
  mounted() {
    this.queryTable()
  },

  methods: {
    detail(row) {
      this.detailRowData = row
      console.log(row)
      this.detailPopupsVisible = true
    },
    audit(row) {
      this.auditRowData = row
      this.auditPopupsVisible = true
    },
    //
    replay(row) {
      this.replayRowData = row
      this.replayPopupsVisible = true
    },
    // 受理
    accept(row) {
      const that = this
      const queryObj = {
        apiConfig: orgApis.accept,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          // 当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: row
        }
      }
      // 转换了中台请求格式数据
      var paramD = that.$getParams(queryObj)
      // 调用中台API方法（可复用）
      that.$requestAPI(paramD).then((response) => {
        if (response.result === '0') {
          return
        }
        var getResult = response
        if (getResult.result === '1') {
          that.$message({
            message: '受理成功',
            type: 'success',
            duration: 2000
          })
          that.queryTable()
        } else {
          that.$message({
            message: getResult.msg,
            type: 'warning',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style></style>
